<template>
  <div class="login">
    <div class="login-box">
      <div class="login-box-left">
        <a href=""><img src="@/assets/img/logo02.png" alt="小鹿线" title="小鹿线官网"></a>
        <div class="qrcode">
          <img src="@/assets/img/微信图片_20230422174444.jpg" alt="" title="扫一扫加我微信">
          <p>扫码登录</p>
        </div>
        <div class="tip">快捷登陆</div>
        <div class="otherLogin">
          <div class="otherLogin-wxlogin" title="微信登录"><svg class="icon" style="width: 2.5em;height:2.5em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2469"><path d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z" fill="#28C445" p-id="2470"></path><path d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z" fill="#28C445" p-id="2471"></path></svg></div>
          <div class="otherLogin-qqlogin" title="QQ登录"><svg class="icon" style="width: 2.5em;height: 2.5em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3996"><path d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z" fill="#1296DB" p-id="3997"></path></svg></div>
          <div class="otherLogin-wblogin" title="微博登录"><svg class="icon" style="width: 2.5em;height: 2.5em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4365"><path d="M512 0C229.243259 0 0 229.224296 0 512s229.243259 512 512 512 512-229.224296 512-512S794.756741 0 512 0zM460.8 778.24c-175.312593 0-317.44-91.685926-317.44-204.781037 0-113.095111 212.859259-291.688296 294.286222-291.688296 34.133333 0 101.148444 25.448296 54.272 106.078815-3.280593 5.632 105.718519-46.895407 165.300148-12.344889 59.600593 34.550519 0 90.055111 0 96.218074 0 6.162963 119.656296 6.162963 119.656296 101.717333C776.874667 686.554074 636.112593 778.24 460.8 778.24zM710.276741 359.461926c-19.740444-23.438222-55.030519-17.957926-55.030519-17.957926-10.334815 0.094815-18.375111-7.111111-19.797333-16.839111-0.132741 0.986074-0.568889 1.896296-0.568889 2.901333l0-5.707852c0 1.005037 0.436148 1.85837 0.568889 2.806519 1.422222-9.993481 9.53837-18.792296 19.740444-20.138667 0 0 42.723556-11.681185 79.739259 21.636741 37.015704 33.317926 21.864296 88.405333 21.864296 88.405333-1.592889 11.207111-12.553481 20.15763-23.931259 20.15763L730.832593 434.725926c-11.396741 0-18.033778-8.779852-14.904889-19.607704C715.927704 415.099259 729.998222 382.900148 710.276741 359.461926zM850.62163 430.26963c-1.422222 15.587556-15.018667 28.273778-30.511407 30.01837 1.137778 0.132741 2.23763 0.341333 3.432296 0.341333l-6.97837 0c1.194667 0 2.37037-0.208593 3.546074-0.341333-15.018667-1.744593-25.125926-14.449778-22.945185-30.056296 0 0 16.70637-64.606815-23.988148-123.031704-40.713481-58.424889-128.208593-48.336593-128.208593-48.336593-15.54963-0.018963-28.596148-11.45363-30.245926-26.718815-0.113778 1.080889-0.32237 2.123852-0.32237 3.223704l0-6.409481c0 1.099852 0.208593 2.123852 0.32237 3.185778 1.649778-15.265185 14.506667-27.439407 30.340741-27.553185 0 0 91.098074-9.197037 158.947556 54.954667C871.860148 323.678815 850.62163 430.26963 850.62163 430.26963z" fill="#F56467" p-id="4366"></path><path d="M450.56 573.44m-20.48 0a1.08 1.08 0 1 0 40.96 0 1.08 1.08 0 1 0-40.96 0Z" fill="#F56467" p-id="4367"></path><path d="M403.303951 640.642444a1.62 2.159 0 1 0-25.964544-55.683072 1.62 2.159 0 1 0 25.964544 55.683072Z" fill="#F56467" p-id="4368"></path><path d="M432.033185 451.830519c-111.995259 15.739259-194.484148 87.514074-184.263111 160.331852 10.221037 72.817778 109.321481 119.087407 221.335704 103.329185 112.014222-15.739259 194.503111-87.514074 184.282074-160.331852C643.147852 482.360889 544.047407 436.091259 432.033185 451.830519zM448.398222 695.675259c-66.635852 12.951704-129.384296-21.560889-140.174222-77.065481-10.789926-55.523556 34.474667-111.009185 101.091556-123.960889 66.635852-12.970667 129.384296 21.541926 140.174222 77.065481C560.260741 627.218963 515.015111 682.723556 448.398222 695.675259z" fill="#F56467" p-id="4369"></path></svg></div>
        </div>
      </div>
      <div class="login-box-right">
        <div class="box-right-container">
          <ul class="box-right-container-tip">
            <li :class="show===true?'active':''" @click="exchangeLogin">账号登录</li>
            <li :class="show===true?'':'active'" @click="exchangeLogin">短信登录</li>
          </ul>
          <div class="box-right-container-form">
            <div class="form-login-1">
              <form class="form1" action="" method="">
                <!-- 账号登录 -->
                <div v-if="show" class="username from">
                  <span><svg class="icon" style="width: 1.2em;height: 1.2em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1579"><path d="M858.5 763.6c-18.9-44.8-46.1-85-80.6-119.5-34.5-34.5-74.7-61.6-119.5-80.6-0.4-0.2-0.8-0.3-1.2-0.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.8 18.9-85 46-119.5 80.6-34.5 34.5-61.6 74.7-80.6 119.5C146.9 807.5 137 854 136 901.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c0.1 4.4 3.6 7.8 8 7.8h60c4.5 0 8.1-3.7 8-8.2-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z" p-id="1580"></path></svg></span>
                  <input type="text" placeholder="请输入您的账号" v-model="userLogin.useraccount">
                </div>
                <div v-if="show" class="password from">
                  <span><svg class="icon" style="width: 1.2em;height: 1.2em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3202"><path d="M365.714286 438.857143l292.571429 0 0-109.714286q0-60.562286-42.861714-103.424t-103.424-42.861714-103.424 42.861714-42.861714 103.424l0 109.714286zM841.142857 493.714286l0 329.142857q0 22.820571-16.018286 38.838857t-38.838857 16.018286l-548.571429 0q-22.820571 0-38.838857-16.018286t-16.018286-38.838857l0-329.142857q0-22.820571 16.018286-38.838857t38.838857-16.018286l18.285714 0 0-109.714286q0-105.179429 75.410286-180.589714t180.589714-75.410286 180.589714 75.410286 75.410286 180.589714l0 109.714286 18.285714 0q22.820571 0 38.838857 16.018286t16.018286 38.838857z" fill="#444444" p-id="3203"></path></svg></span>
                  <input type="text" placeholder="请输入您的密码" v-model="userLogin.userpassword">
                </div>
                <!-- 短信登录 -->
                <div v-if="!show" class="userphone from">
                  <span><svg class="icon" style="width: 1.2em;height: 1.2em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1841"><path d="M398.652952 165.692952c-32.280381-46.006857-58.172952-61.318095-92.867047-54.808381-14.969905 2.80381-24.210286 7.850667-41.20381 22.528l-12.946285 11.361524-25.185524 20.894476-6.582857 5.753905c-3.705905 3.413333-6.38781 6.217143-9.825524 10.118095-64 72.46019-81.724952 185.782857-44.470857 292.327619 26.794667 76.55619 74.605714 152.624762 142.774857 228.644572 72.289524 80.62781 133.046857 131.364571 202.922666 168.374857 54.857143 29.013333 96.865524 41.74019 145.676191 43.227429 59.001905 1.828571 110.957714-11.50781 153.648762-39.15581a162.133333 162.133333 0 0 0 19.553524-15.189333l8.289523-7.558095 16.335239-15.213715 5.534476-4.924952 10.922666-9.435429c22.040381-19.651048 29.184-31.939048 30.646858-51.370666 2.194286-29.647238-11.215238-52.736-49.737143-85.699048l-26.063238-21.820952-12.117334-10.581334-11.459047-9.825524c-37.229714-30.744381-64.804571-40.69181-100.205715-35.35238-24.283429 3.632762-38.278095 12.141714-63.073523 38.107428l-10.947048 11.654095c-18.041905 19.017143-28.330667 26.258286-43.544381 29.305905-22.25981 4.461714-44.373333-7.046095-80.262095-36.205714-46.250667-37.546667-84.626286-80.676571-117.613715-131.949714-22.869333-35.766857-31.890286-62.902857-24.941714-87.600762 2.82819-9.99619 9.679238-17.042286 24.064-28.184381l14.994286-11.312762 2.413714-1.877334 22.747429-18.553904c20.114286-16.822857 28.281905-28.281905 32.572952-45.836191 8.899048-36.10819 0.487619-66.072381-32.426667-117.638095l-15.62819-24.234667-5.558857-8.533333-6.436572-9.435429z" p-id="1842"></path></svg></span>
                  <input type="text" placeholder="请输入您的手机号" v-model="userLogin.userphone">
                </div>
                <div v-if="!show" class="usercode from">
                  <span><svg class="icon" style="width: 1.2em;height: 1.2em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2497"><path d="M557.24437 73.782276h193.531374c100.527353 0 182.774401 82.247048 182.774402 182.775425v43.629596c0 100.528377-82.247048 182.775425-182.774402 182.775424H557.24437c-100.5294 0-182.775425-82.247048-182.775425-182.775424v-43.629596c0-100.528377 82.246025-182.775425 182.775425-182.775425z m-71.798089 110.517872v57.002134h309.759283v-57.002134H485.446281z m0 110.780861v57.002134h170.477355v-57.002134H485.446281z" fill="#515151" p-id="2498"></path><path d="M536.268681 429.795931h172.088036c12.427006 0 31.944486 14.412216 22.594556 22.586369l-9.146292 7.995075c-9.34993 8.17313-11.82121 16.397426-22.585346 22.585346l-154.027741 88.519903c-19.082576 10.968797-31.509581 3.605101-31.509582-17.454499V452.3823c0.001023-12.418819 10.168573-22.586369 22.586369-22.586369z" fill="#515151" p-id="2499"></path><path d="M229.339857 6.024192h183.619651c-32.668985 40.654851-56.209074 88.962993-67.544214 141.789023h-133.725387c-35.915929 0-65.303178 29.387249-65.303178 65.303178v497.751513c0 35.915929 29.387249 65.303178 65.303178 65.303178H698.753008c35.915929 0 65.302155-29.388272 65.302154-65.303178V550.686014a340.216909 340.216909 0 0 0 55.936875-19.620834v348.019602c0 76.384539-62.507511 138.892049-138.891026 138.89205H229.339857c-76.391702 0-138.891026-62.507511-138.891026-138.89205v-734.169564c0-76.391702 62.499324-138.891026 138.891026-138.891026z m225.875972 816.409449c-32.421345 0-58.705936 26.28459-58.705936 58.705936 0 32.429532 26.28459 58.714122 58.705936 58.714122s58.714122-26.28459 58.714123-58.714122c0-32.422369-26.292777-58.705936-58.714123-58.705936z" fill="#515151" p-id="2500"></path></svg></span>
                  <input type="text" placeholder="请输入短信验证码" v-model="userLogin.usercode" style="width:110px">
                  <button ref="btn" class="sendcode" type="button" @click="sendCode"><span ref="spantip">发送验证码</span></button>
                </div>
                <div class="submit"><button class="btn" type="button" @click="login_btn">登录</button></div>
                <div class="losepassword"><a href="">忘记密码?</a></div>
                <div class="usertip"><span>登录即同意<a href="">《用户服务协议》</a><a href="">《隐私政策》</a></span>。</div>
                <div class="tip"><span><a href="http://127.0.0.1:5173/">返回首页</a><span>|</span><span>还没有账号?<router-link to="/register">去注册</router-link></span></span></div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 滑块组件 -->
  <Verify ref="verify" :captcha-type="'blockPuzzle'" :img-size="{width:'400px',height:'200px'}" @success="onSuccess" @error="error" />
</template>

<script setup>
//引入vue组合式api
import {ref,reactive,onBeforeMount} from 'vue'
//引入请求api
import {reqUserLoginByAccount,reqPhoneCode,reqUserLoginByMobile} from "@/api/userInfo.js"
//引入工具文件
import {Encrypt} from "@/utils/aes.js"
//pinia,持久化存储
import { useUserStore } from '../store/user'
const userStore = useUserStore();
//element ui 引入,手动
import { ElMessage } from 'element-plus'
//路由
import {useRoute,useRouter} from 'vue-router'
const route = useRoute()
const router = useRouter()
//引入滑块/点击验证的组件
import Verify from "@/components/verifition/Verify.vue";
let verify = ref()
//安全验证成功回调
let time = 0;
const onSuccess = () => {
  //发请求
  reqPhoneCode({mobile:userLogin.userphone}).then(res=>{
    console.log("获取登录验证码api成功",res);
  })
  time = 60;//重发验证码时间设定
  btn.value.className = "sendcode disabled"; //按钮禁用
  let timer = setInterval(()=>{
    spantip.value.innerHTML = `${time}秒后重试`;
    if(time <= 0){
      clearInterval(timer);
      btn.value.className = "sendcode"; //按钮接触禁用
      spantip.value.innerHTML = "发送验证码"
      return ;
    }
    time--;
  },1000)
}
//安全验证失败回调
const error = () => {}

//用户登录的相关信息
let userLogin = reactive({
  useraccount:"test",//用户账号
  userpassword:"123456",
  userphone:"",//用户手机号
  usercode:"",//验证码
})

//控制账号\短信登录切换
let show = ref(true)
//账号密码登录与短信登录的切换
const exchangeLogin = ()=>{
  show.value = !show.value;
}

//获取dom对象
const spantip = ref()
const btn = ref()
//验证码发送按钮
function sendCode(){
  //先展示安全验证
  verify.value.show();
  //请求已经放到安全验证成功的回调中了
}

//登录按钮
const login_btn = ()=>{
  console.log("测试账号:test密码:123456");
  if(show){
    //方式1 账号密码登录
    reqUserLoginByAccount({username:Encrypt(userLogin.useraccount),password:Encrypt(userLogin.userpassword)}).then(res=>{
      if(res.meta.code === '10006'){
        userStore.setToken(res.data.accessToken);  //存储在pinia中
        ElMessage({message:"登录成功",type:"success"})
        //跳转页面
        router.push('/');
        console.log("账号密码登录api成功",res);
      }else{
        ElMessage({
          message:"账号或者密码错误",
          type:"warning"
        })
      }
    })
  }else{
    //方式2 手机验证码登录
    reqUserLoginByMobile({mobile:userLogin.userphone,captcha:userLogin.usercode}).then(res=>{
      console.log("手机验证码登录api成功",res);
    })
  }
}

//生命周期函数
onBeforeMount(()=>{
  // verify.value.show();
  // console.log(verify.value.show);
})
</script>

<style scoped>
.login{
  width: 100%;
  height: 100vh; /*高度满屏*/
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(@/assets/img/loginbg.jpeg) no-repeat no-repeat;
  /* opacity: 0.6; *//*具有继承性*/
}
.login-box{
  width:950px;
  height:500px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  box-shadow: 0px 0px 5px #777;
}
.login-box-left{
  width: 475px;
  height: 500px;
  background: #388fff;
  position: relative;
}
.login-box-left a{
  position: absolute;
  top:20px;
  left:20px;
}
.login-box-left img{
  width:120px;
  height: 48px;
}
.login-box-left .qrcode{
  position: absolute;
  width: 200px;
  height: 245px;
  top:90px;
  left:130px;
}
.login-box-left .qrcode img{
  width: 200px;
  height: 200px;
}
.login-box-left .qrcode p{
  width: 200px;
  height: 45px;
  background: #388fff;
  color:#fff;
  font-size:14px;
  text-align: center;
  line-height: 45px;
}
.login-box-left .tip::before{
  content: '';
  width: 80px;
  height: 2px;
  background: #dddddd;
  position: absolute;
  left: 70px;
  top: 50%;
}
.login-box-left .tip::after{
  content: '';
  width: 80px;
  height: 2px;
  background: #dddddd;
  position: absolute;
  right: 70px;
  top: 50%;
}
.login-box-left .tip{
  position: absolute;
  top:360px;
  left:37.5px;
  width:400px;
  height: 30px;
  color: #dddddd;
  text-align: center;
  line-height: 30px;
}
.login-box-left .otherLogin{
  position: absolute;
  top:420px;
  left: 37.5px;
  width:400px;
  height:60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-box-left .otherLogin>div{
  width:40px;
  height: 40px;
  margin: 0 10px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.login-box-right{
  width: 475px;
  height: 500px;
  background: url(@/assets/img/ybbg.jpeg) no-repeat;
  background-size: cover;
}
.box-right-container{
  margin: 30px auto;
  /* padding: 10px 40px; */
  width: 350px;
  height: 440px;
  background: #ffffff;
  box-shadow: 0 0 8px #cccccc;
  border-radius: 8px;
}
.box-right-container .box-right-container-tip{
  width:270px;
  height: 49px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.box-right-container .box-right-container-tip>li{
  width: 40%;
  line-height: 49px;
  font-size: 17px;
  font-weight: bold;
  border-bottom: 4px solid #fff;
  cursor: pointer;
}
.box-right-container .box-right-container-tip .active{
  border-bottom: 4px solid #388fff;
}
/* 表单 */
.box-right-container .box-right-container-form{
  width: 270px;
  height: 360px;
  margin: 0 auto;
}
/* 账号登录 */
.box-right-container .box-right-container-form .form-login-1{
  width:100%;
  height: 100%;
}
.box-right-container .box-right-container-form .form-login-1 .from{
  margin-top:30px;
  width:270px;
  height: 40px;
  line-height: 40px;
  border-bottom: 2px solid #777;
}
.box-right-container .box-right-container-form .form-login-1 div span{
  width:20px;
  height: 40px;
}
.box-right-container .box-right-container-form .form-login-1 div input{
  width: 240px;
  height: 35px;
  padding: 0 5px;
  outline: none;
  border: none;
}
/* 发送验证码的按钮 */
.box-right-container .box-right-container-form .form-login-1 div .sendcode{
  width: 130px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
  background: #5333f3;
  border-radius: 20px;
  border: none;
  cursor: pointer;
}
/* 按钮点击一次后禁用60s */
.box-right-container .box-right-container-form .form-login-1 div .disabled{
  background: #388fff;
  cursor: not-allowed;
}
.box-right-container .box-right-container-form .form-login-1 div .sendcode:hover{
    background: #388fff;
}
/* 用户输入密码与前面有重复，可删 */
.box-right-container .box-right-container-form .form-login-1 .password{
  margin-top:30px;
  width:270px;
  height: 40px;
  line-height: 40px;
  border-bottom: 2px solid #777;
}
.box-right-container .box-right-container-form .form-login-1 .submit{
  width: 100%;
  height: 40px;
  margin-top: 30px;
  display: flex;
  align-items: center;
}
.box-right-container .box-right-container-form .form-login-1 .submit .btn{
  cursor: pointer;
  width: 270px;
  height: 40px;
  color: #fff;
  background: #5333f3;
  border-radius: 20px;
  border: none;
}
.box-right-container .box-right-container-form .form-login-1 .submit .btn:hover{
  background: #388fff;
}
.box-right-container .box-right-container-form .form-login-1 .losepassword{
  display: flex;
  justify-content: end;
  margin: 20px 10px;
}
.box-right-container .box-right-container-form .form-login-1 .tip{
  margin-top: 50px;
}
.box-right-container .box-right-container-form .form-login-1 .tip a{
  color: #388fff;
}
.box-right-container .box-right-container-form .form-login-1 .tip span{
  margin: 0 5px;
}
</style>